<template>

    <mi-list-page>

        <mi-table :list="list">
            <template #topBar>
                <mi-top-bar :data="topToolbar"></mi-top-bar>
            </template>

            <template #type="{row}">
                <mi-image-v2 v-if="row.fileType=='image'" :src="row.path" :size="80" />
                <div v-else-if="row.fileType=='video'" type="warning">
                    <video width="80" height="80" controls>
                        <source :src="row.path">
                        您的浏览器不支持 video 属性。
                    </video>
                </div>
                <div v-else-if="row.fileType=='file'">
                    <mi-icon name="fas fa-file-archive" />
                </div>
            </template>

            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary" @click="lineToolbarEvent(row, 'del')" v-auth="auth.del">删除</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>


</template>


<script setup lang="ts">

import {computed, getCurrentInstance, provide, reactive, ref, watch} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";

const auth = makeModelAuth('sys.uploadFile')

const { proxy } : any = getCurrentInstance()

const tdWidth = global.tdWidth

// toolbar 事件
const topToolbar = [
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:Array<number>) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids
            })
        }
    },
]


const lineToolbarEvent = (row:any, type:string) => {
    if (type == 'edit'){
        list.currentRow = row
        edit.show = true
    }else if (type == 'del'){
        list.del({
            url:`/${auth.del}`,
            ids: [row.id]
        })
    }
}


const list = reactive(new List({
    where: {},
    url: `/${auth.index}`,
    columns:[
        {name: "check", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "original_name", title: "名称"},
        {name: "fileType", title: "类型", type:'slot', slot:'type'},
        {title: "操作", type:'slot', slot:'toolbar', fixed:'right'},
    ]
}))

const edit = reactive(new Edit({}))

provide("list", list)
provide("edit", edit)

</script>

<style scoped>

</style>
